Ext.require(['Ext.data.*', 'Ext.grid.*']);
if (Ext.grid.RowEditor) {
    Ext.apply(Ext.grid.RowEditor.prototype, {
        saveBtnText: '保存',
        cancelBtnText: '取消',
        errorsText: '错误信息',
        dirtyText: '已修改,你需要提交或取消变更'
    });
    }
Ext.define('sysGroup', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        useNull: true
    },  'orderID','GroupCode', 'GroupName', 'Remark', 'GroupType'],
    validations: [{
        type: 'length',
        field: 'GroupName',
        min: 1
    }]
});
Ext.define('sysGroupProg', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        useNull: true
    }, 'GroupID', 'ProgID', 'ProgName']//,

});
Ext.define('sysGroupProg2', {
    extend: 'Ext.data.Model',
    fields: ['id', 'GroupID', 'ProgID', 'ProgName']//,

});

Ext.onReady(function(){

    var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'sysGroup',
        proxy: {
            type: 'ajax',
            api: {
            read: 'sysgroupAjax.aspx?action=read',
            create: 'sysgroupAjax.aspx?action=create',
            update: 'sysgroupAjax.aspx?action=update',
            destroy: 'sysgroupAjax.aspx?action=delete'
            },
            reader: {
                type: 'json' ,
                root: 'data'
            },
            writer: {
                type: 'json' ,
                root: 'data'      
            }},
        listeners: {
            write: function(store, operation){

                
            }
        }
    });
    
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
    
    var grid = Ext.create('Ext.grid.Panel', {
        //renderTo: document.body,
        //layout:{type:"fit"},
        plugins: [rowEditing],
        width: 250,
        //        height: 300,
        region: 'west',
        frame: true,
        title: '组列表',
        store: store,
        //iconCls: 'icon-user',
        defaults: { xtype: 'textfield' }, 
        columns: [{
            text: '组代码',
            sortable: true,
            width: 60,
            dataIndex: 'GroupCode',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: '组名称',
            sortable: true,
            width: 100,
            dataIndex: 'GroupName',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: '备注',
            flex: 1,
            width: 100,
            dataIndex: 'Remark',
            field: {
                xtype: 'textfield'
            }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: '增加',
                iconCls: 'icon-add',
                handler: function() {
                    if(true){
                        store.insert(0, new sysGroup({orderID:0}));
                        rowEditing.startEdit(0, 0);
                    }
                }
            }, '-', {
                itemId: 'delete',
                text: '删除',
                iconCls: 'icon-delete',
                disabled: true,
                handler: function(){
                    var selection = grid.getView().getSelectionModel().getSelection()[0];
                    if (selection) {
                        store.remove(selection);
                    }
                }
            }]
        }]
    });
    grid.getSelectionModel().on('selectionchange', function(selModel, selections){
        grid.down('#delete').setDisabled(selections.length === 0);

        if(selections.length === 0)return;
        
        var params = { params: { groupid: selections[0].getId()} };
        firstGridStore.removeAll();
        firstGridStore.load(params);
        secondGridStore.removeAll();
        secondGridStore.load(params);
    });
    //dragdrop
    // create the data store
    var progProxy =Ext.create('Ext.data.proxy.Ajax',{
        api: {
                read: 'sysgroupprogAjax.aspx?action=read',
                create: 'sysgroupprogAjax.aspx?action=create',
                update: 'sysgroupprogAjax.aspx?action=update',
                destroy: 'sysgroupprogAjax.aspx?action=delete'
            },
            reader: {
                type: 'json',
                root: 'data'
            },
            
            writer: {
                type: 'json',
                root: 'data'
                    }
           
            
    });
    var firstGridStore = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'sysGroupProg',
        proxy:progProxy
        });


    // Column Model shortcut array
    var columns = [
        { text: "模块", flex: 1, sortable: true, dataIndex: 'ProgName' }
    ];

    // declare the source Grid
    var firstGrid = Ext.create('Ext.grid.Panel', {
        multiSelect: true,
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragGroup: 'firstGridDDGroup',
                dropGroup: 'secondGridDDGroup'
            },
            listeners: {
                drop: function(node, data, dropRec, dropPosition) {
                    //var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                    //Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
                },
                 'itemdblclick':function(view,record,item,index,e){
                     firstGridStore.remove(record); 
                     var ipost=secondGridStore.getRange().length; 
                      secondGridStore.insert(ipost,record); 
               }
            }
        },
        store: firstGridStore,
        columns: columns,
        stripeRows: true,
        title: '已选模块',
        margins: '0 2 0 0'
    });

    var secondGridStore = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'sysGroupProg',
        proxy: {
            type: 'ajax',
            api: {
                read: 'sysprogTreeAjax.aspx?action=proggrid',
                create: 'sysprogTreeAjax.aspx?action=create',
                update: 'sysprogTreeAjax.aspx?action=update',
                destroy: 'sysprogTreeAjax.aspx?action=delete'
            },
            reader: {
                type: 'json',
                root: 'data'
            },
             writer: {
                type: 'json',
                root: 'data'
                    }
        }
    });

    // create the destination Grid
    var secondGrid = Ext.create('Ext.grid.Panel', {
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragGroup: 'secondGridDDGroup',
                dropGroup: 'firstGridDDGroup'
            },
            listeners: {
                drop: function(node, data, dropRec, dropPosition) {
                    //var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                    //Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
                },
                 'itemdblclick':function(view,record,item,index,e){
                     secondGridStore.remove(record);
                     var ipost=firstGridStore.getRange().length;
                   
                     firstGridStore.add({id:'',GroupID:record.data.GroupID,ProgID:record.data.ProgID,ProgName:record.data.ProgName});
                     //firstGridStore.insert(ipost,record); 
               }
            }
        },
        store: secondGridStore,
        columns: columns,
        stripeRows: true,
        title: '全部模块',
        margins: '0 0 0 3'
    });
    var displayPanel = Ext.create('Ext.Panel', {
        width: 650,
        height: 300,
        region: 'center',
        layout: {
            type: 'hbox',
            align: 'stretch',
            padding: 5
        },
        //renderTo: 'panel',
        defaults: { flex: 1 }, //auto stretch
        items: [
            firstGrid,
            secondGrid
        ],
//        dockedItems: {
//            xtype: 'toolbar',
//            dock: 'bottom',
//            items: ['->', // Fill
//            {
//                iconCls: 'icon-save',
//                text: '保存',
//                handler: function() {
//                    //refresh source grid
//                    firstGridStore.save();
//                    //this.up('window').hide();
//                }
//            }]
//        }
    });
    Ext.create('Ext.Viewport', {
        layout: {
            type: 'border',
            padding: 5
        },
        defaults: {
            split: true
        },
        items: [grid, displayPanel]
        });
});
